<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>登录页面</title>
<link rel="icon" href="LightYear/favicon.ico" th:href="@{/LightYear/favicon.ico}" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
<meta name="author" content="yinqi">
<link href="LightYear/css/bootstrap.min.css" th:href="@{/LightYear/css/bootstrap.min.css}" rel="stylesheet">
<link href="LightYear/css/materialdesignicons.min.css" th:href="@{/LightYear/css/materialdesignicons.min.css}" rel="stylesheet">
<link href="LightYear/css/style.min.css" th:href="@{/LightYear/css/style.min.css}" rel="stylesheet">
<style>
.login-box {
    background-color: rgba(255, 255, 255, .25);
}
.login-box p:last-child {
    margin-bottom: 0px;
}
.login-form .form-control {
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
}
.login-form .has-feedback {
    position: relative;
}
.login-form .has-feedback .form-control {
    padding-left: 36px;
}
.login-form .has-feedback .mdi {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    width: 36px;
    height: 36px;
    line-height: 36px;
    z-index: 4;
    color: #dcdcdc;
    display: block;
    text-align: center;
    pointer-events: none;
}
.login-form .has-feedback.row .mdi {
    left: 15px;
}
.login-form .form-control::-webkit-input-placeholder{ 
    color: rgba(255, 255, 255, .8);
} 
.login-form .form-control:-moz-placeholder{ 
    color: rgba(255, 255, 255, .8);
} 
.login-form .form-control::-moz-placeholder{ 
    color: rgba(255, 255, 255, .8);
} 
.login-form .form-control:-ms-input-placeholder{ 
    color: rgba(255, 255, 255, .8);
}
.login-form .custom-control-label::before {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(0, 0, 0, 0.1);
}
</style>
</head>
  
<body class="center-vh" style="background-image: url(/LightYear/images/back-navy.png); background-size: cover;">
<div class="login-box p-5 w-420 mb-0 mr-2 ml-2">
  <div class="text-center mb-3">
    <a href="index"> <img alt="light year admin" src="images/logo-sidebar-003.png" th:src="@{/LightYear/images/systitle.png}"> </a>
  </div>
  <form action="/user/login" method="post" class="login-form">
    <div class="form-group has-feedback">
      <span class="mdi mdi-account" aria-hidden="true"></span>
      <input type="text" class="form-control"  name ="username" id="username" placeholder="用户名">
    </div>

    <div class="form-group has-feedback">
      <span class="mdi mdi-lock" aria-hidden="true"></span>
      <input type="password" class="form-control" name="password" id="password" placeholder="密码">
    </div>

    <div class="form-group has-feedback row">
      <div class="col-7">
        <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
        <input type="text" name="verifyCode" id="verifyCode" class="form-control" maxlength="4" placeholder="验证码">
      </div>
      <div class="col-5 text-right">
        <img src="/verify-code"   class="pull-right"  style="cursor: pointer;" onclick="this.src='/verify-code?d='+Math.random();" title="点击刷新" >
      </div>
    </div>

    <!--<div id="validatePanel" class="item" style="width: 137px;">
      <input type="text" name="verifyCode" placeholder="请输入验证码" maxlength="4">
      <img  class="validateImg"  onclick = "this.src='/verify-code?d='+new Date()*1" src="/verify-code" title="点击更换" >
    </div>-->


    <div class="form-group">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" name="remember-me" id="rememberme">
        <label class="custom-control-label not-user-select text-white"   for="rememberme">5天内自动登录</label>
        <a style="margin-left: 120px" class="text-right text-white" href="registPage">注册用户</a>
      </div>
    </div>


    <p  style="margin-top: -20px"  class="layui-font-18 layui-font-red layui-this"
        th:if="${param.error}"  th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}"></p>

    <div class="form-group">
      <button class="btn btn-block form-control" type="submit" id="loginDemoBtn">立即登录</button>
    </div>
  </form>

 <p class="text-center text-white">Copyright © 2022 <a href="javascript:;">ChaooGG</a>. All right reserved</p>
</div>
<!--固定右下角-->
<!--<div style="position: absolute; bottom: 10px; right: 10px;"><a href="toNewLogin">切换新版本登录</a></div>-->
<script type="text/javascript" src="LightYear/js/jquery.min.js" th:src="@{/LightYear/js/jquery.min.js}" ></script>
<script type="text/javascript" src="LightYear/layer/layer.js" th:src="@{/LightYear/layer/layer.js}" ></script>
<script type="text/javascript">

  //  更具宽带进行设置  layer.msg("由于服务器带宽限制,页面加载缓慢!请等待......", {ico:1,time:15000,offset:['50px','470px']})
  $("#loginDemoBtn").click(function () {

var username =$("#username").val();
var password =$("#password").val();
var verifyCode =$("#verifyCode").val();
  if(username==""){
    layer.tips("用户名不能为空！","#username")
    return false;
  }
  if(password==""){
      layer.tips("密码不能为空！","#password")
      return false;
    }

    if(verifyCode==""){
      layer.tips("请输入验证码！","#verifyCode")
      return false;
    }

    /*layer.msg('登陆中……', {
      // icon: 1,
      time: 3000 //2秒关闭（如果不配置，默认是3秒）
    }, function(){
      window.location.href="index"
    });*/
  })

</script>
</body>
</html>